
<template>
	<div class="tar-bar-item"  @click="itemClick">
		<slot name="item-icon"></slot>
		<div :class="{active : isactive}"><slot name="item-text"></slot></div>
	</div>
</template>

<script>
	export default {
  name: 'tabBarItem',
props:{
	path:String
},
  data(){
  	return{

  	}
  },
  computed:{
  	isactive(){
  		return this.$route.path.indexOf(this.path)!== -1
  	}
  },
  methods:{
  	itemClick(){
  		this.$router.replace(this.path).catch(err => err)
  	}
  }

}
</script>

<style>
.tar-bar-item{
	flex: 1;
	text-align: center;
	height: 49px;
}
.tar-bar-item img{
	width: 20px;
	height: 20px;
	margin-top: 3px;
	vertical-align: middle;
}
.active{
	color: red;
}
</style>